<template>
  <div ref="d3" class="d3"></div>
</template>

<script>
import * as THREE from 'three';
export default {
  data(){
    return{
      cube:null,
      renderer:null,
      scene:null,
      camera:null, 
      geometry:null, //几何体
      material:null //材质
    }
  },
  mounted(){
    this.scene = new THREE.Scene();
    this.$nextTick(()=>{
      this.camera = new THREE.PerspectiveCamera( 75, this.$refs.d3.clientWidth/this.$refs.d3.clientWidth, 0.1, 1000 );
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize( this.$refs.d3.clientWidth, this.$refs.d3.clientHeight );
      this.$refs.d3.appendChild(this.renderer.domElement )
      this.geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
      this.material = new THREE.MeshBasicMaterial( { color: '#06b8de' } );
      this.cube = new THREE.Mesh( this.geometry, this.material );
      this.scene.add( this.cube );
      this.camera.position.z = 30;
      this.animate()
    })
    
  },
  beforeDestroy(){
    // this.cube.dispose()
    // this.scene.dispose()
    this.renderer.dispose()
    console.log('this.scene',this.scene)
    // this.camera.dispose()
    this.geometry.dispose()
    this.material.dispose()
  },
  methods:{
    animate(){
      requestAnimationFrame( this.animate );
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.renderer.render( this.scene, this.camera );
    }
  }
}
</script>

<style scoped>
.d3{
  width: 100%;
  height: 100%;
}
</style>